<!DOCTYPE html>
<html>

<head>
    <title>KDT</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <script src="/kdt.js"></script>
    <script src="/vue.js"></script>
    <script type="text/javascript">
    var mode = getCookie("KDT-Mode")
    var usid = getCookie('KDT-User-Sid')
    var asid = getCookie('KDT-Admin-Sid')
    if (usid == '' && asid == '') {
        location.href = '/userLogin.html'
    } else if (mode == 'User') {
        location.href = '/'
    }

    function initData() {
    	window.app.Sid=getCookie('KDT-Admin-Sid')
    	var xhr=new XMLHttpRequest()
    	xhr.onload=function(e) {
    		if (xhr.status==200||xhr.status==304) {
    			var o=JSON.parse(xhr.responseText)
    			if (o.State=="OK") {
    				window.app.Packs=o.Ps
    			}else {
    				alert(o.Info)
    			}
    		}
    	}
    	var o=new Object()
    	o.State=window.app.Sid
    	xhr.open('POST', '/apis/pack/admin/query', true)
    	xhr.send(JSON.stringify(o))
    }
    setTimeout('initData()', 50)
    </script>
</head>

<body style="display: flex;flex-direction: column;align-items: center;margin: 0px;padding: 0px;">
    <div class="head" style="width: 100%;box-shadow: 3px 3px 3px #aaa;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
        <b style="margin-left: 8px;">Packs I claimed</b>
        <span>
			<a href="/packs.html" id="claimPack">Claim pack</a>
			<input type="button" value="admin logout" onclick="setCookie('KDT-Admin-Sid','',0);location.href='/'">
		</span>
    </div>
    <div style="max-width: 500px;width: 100%;display: flex;flex-direction: column;align-items: center;" id="main_container">
        <div v-for='(p,pindex) in Packs' style="box-shadow: 1px 1px 1px #aaa;padding: 5px;margin: 3px;width: 100%;">
            <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;cursor: pointer;">
                <img v-bind:src='getCover(pindex)' style="height: 100px;">
                <div style="display: flex;flex-direction: column;justify-content: space-around;">
                    <b>{{p.Title}}</b>
                    <span style="color: green" v-if='p.DeliveryDots.length>0'>{{p.DeliveryDots[p.DeliveryDots.length-1].Title}}</span>
                </div>
                <input type="button" value="Add delivery info" v-on:click='addDot(pindex)'>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    window.app = new Vue({
        el: '#main_container',
        data: {
        	Sid:'',
            Packs: [],
            getCover: function(pindex) {
                return '/res/' + (pindex % 8 + 1).toString() + '.jpg'
            },
            addDot: function(pindex) {
            	var dot=prompt('Input delivery infomation')
                var xhr=new XMLHttpRequest()
                xhr.onload=function(e) {
                    if (this.status==200||this.status==304) {
                        var o=JSON.parse(xhr.responseText)
                        if (o.State=="OK") {
                            location.href='/adminIndex.html'
                        }else {
                            alert(o.Info)
                        }
                    }
                }
                var o=new Object()
                o.State=window.app.Sid
                o.Info=window.app.Packs[pindex].PackId
                o.Other=dot
                xhr.open('POST', "/apis/pack/admin/adddot", true)
                xhr.send(JSON.stringify(o))
            }
        }
    })
    </script>
</body>

</html>